<template>
  <div id="app">
    <router-view class="main" />
    <!-- 加入route该属性时，可以让每一个子节点当做路由组件使用 -->
    <!-- <Tips @info="info" /> -->
    <!-- <van-tabbar
      active-color="deeppink"
      :fixed="false"
      route
      v-if="isShowTabBar"
    >
      <van-tabbar-item icon="home-o" :to="{ name: 'list' }"
        >首页</van-tabbar-item
      >
      <van-tabbar-item icon="shop-collect-o" :to="{ name: 'exchange' }"
        >兑换</van-tabbar-item
      >
      <van-tabbar-item icon="shopping-cart-o" :to="{ name: 'locker' }"
        >寄存柜</van-tabbar-item
      >
      <van-tabbar-item icon="manager-o" :to="{ name: 'main' }"
        >我的</van-tabbar-item
      >
    </van-tabbar> -->
  </div>
</template>
<script>
export default {
  data() {
    return {
      isShowTabBar: false,
      btn2: false,
    };
  },
  methods: {
    info(v) {
      this.isShowTabBar = v;
    },
  },
  //监听路由情况 动态控制tabbar组件的现实和隐藏
  //即半段路由中携带的hideTabBar属性是否存在，若存在则tabbar消失
  // watch: {
  //   $route(v) {
  //     console.log(v);
  //     if (v.meta.hideTabBar) {
  //       this.isShowTabBar = false;
  //     } else {
  //       this.isShowTabBar = true;
  //     }
  //   },
  // },
};
</script>

<style lang="scss">
html,
body {
  width: 100%;
  height: 100%;

  #app {
    height: 100%;
    display: flex;
    flex-direction: column;

    .main {
      flex: 1;
      overflow: auto;
    }
  }
}
</style>
